<template>
  <div>
    <!-- 3.使用 -->
    <Top></Top>
    <Header></Header>
    <!-- 表示一行，自动将行拆分成24列 -->
    <el-row>
      <!-- span:占多少栏   offset：向右便宜多少栏 -->
      <el-col :span="16" :offset="4">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(goods, index) in goodsList" :key="index" style="height: 300px">
              <router-link :to="'/goodsView/' + goods.id" tag="a">
                <img :src=" $imgPrefix + goods.image" alt="">
              </router-link>
              <p>{{goods.name}}</p>
              <p>{{goods.price}}</p>
          </el-col>
        </el-row>
      </el-col>
    </el-row>  
    <Footer></Footer>
  </div>
</template>


<script>
// 1.导入
import Top from './commons/top.vue'
import Header from './commons/header.vue'
import Footer from './commons/footer.vue'
export default {
  // data必须是一个函数，而且必须返回一个对象，对象中的属性就是当前vue中的属性，通常是一些与数据相关的属性
  data() {
    return {
      cid: this.$route.params.cid, // 从$route当前处于活跃状态路由中获取cid参数，赋值给cid属性
      goodsList: [],
    }
  },
  components: {
    // 2.注册
    Top,
    Header,
    Footer,
  },
  mounted() {
    // 页面挂载时执行
    this.$axios.get('/goods/findByCid/' + this.cid).then((res) => {
      console.log(res)
      //res.data是ResponseResult对象
      this.goodsList = res.data.data
    })
  },
}
</script>

<style scoped>
p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 6px;
}
</style>